<template>
    <div style="padding: 20px;">
        <el-card shadow="never">
            <el-form :model="state.search" inline size="default">
                <el-form-item label="灭火器类型">
                    <el-select v-model="state.search.type" placeholder="请选择" clearable>
                        <el-option label="干粉灭火器" :value="1"></el-option>
                        <el-option label="水基型灭火器" :value="2"></el-option>
                        <el-option label="洁净气体灭火器" :value="3"></el-option>
                        <el-option label="二氧化碳灭火器" :value="4"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="过期查询">
                    <el-select v-model="state.search.expire_left" placeholder="请选择" clearable>
                        <el-option :label="item.label" :key="index" :value="item.value"
                            v-for="(item, index) in expiredTimeOption"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="维修机构">
                    <el-input placeholder="请输入" v-model="state.search.maintenance_organization"></el-input>
                </el-form-item>
                <el-form-item label="型号">
                    <el-input placeholder="请输入" v-model="state.search.model"></el-input>
                </el-form-item>
                <el-form-item label="生产厂家">
                    <el-input placeholder="请输入" v-model="state.search.factory"></el-input>
                </el-form-item>
                <el-form-item label="检验人员">
                    <el-input placeholder="请输入" v-model="state.search.maintainer"></el-input>
                </el-form-item>
                <el-form-item label="检验状态">
                    <el-select v-model="state.search.status" placeholder="请选择" clearable>
                        <el-option label="正在检验维修" :value="1"></el-option>
                        <el-option label="完成检验维修" :value="2"></el-option>
                    </el-select>
                </el-form-item>


                <el-form-item>
                    <el-button type="primary" @click="getList" size="mini">搜索</el-button>
                    <el-button type="warning" @click="reset" size="mini">重置</el-button>
                    <el-button type="warning" @click="hanldeDownExcel" size="mini">导出</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card shadow="never" style="margin-top: 20px;">
            <template  #header>
                <el-button type="primary" @click="addOrUpdate()" size="mini">添加</el-button>
                <div class="red">
                    <div>《建筑灭火器配置验收及检查规范》GB50444-2008灭火器维修期限：水基型灭火器为出厂期满3年，首次维修以后每满1年；干粉灭火器、洁净气体灭火器、二氧化碳灭火器为出厂期满5年，首次维修以后每满2年.</div>
                    <div>《消防设施通用规范》GB55036-2023灭火器报废年限：水基型灭火器为6年；干粉灭火器、洁净气体灭火器为10年；二氧化碳灭火器为12年。</div>
                </div>
            </template>

            <el-table :data="state.list" v-loading="state.loading">
                <el-table-column label="灭火器类型" prop="type" min-width="80">
                    <template #default="{ row }">
                        {{ paraphrase(row.type, extinguisherOption) }}
                    </template>
                </el-table-column>
                <el-table-column label="型号" prop="model" min-width="80"></el-table-column>
                <el-table-column label="生产厂家" prop="factory" min-width="120"></el-table-column>
                <el-table-column label="维修机构" prop="maintenance_organization" min-width="120"></el-table-column>
                <el-table-column label="维修时间" min-width="120" prop="maintenance_time"></el-table-column>
                <el-table-column label="维修数量" min-width="120" prop="quantity"></el-table-column>
                <el-table-column label="维修完成数量" min-width="120" prop="completed_quantity"></el-table-column>
                <el-table-column label="检验状态" min-width="120" prop="status" align="center">
                    <template #default="{ row }">
                        <span v-if="row.status == 1">正在检验维修</span>
                        <span v-else-if="row.status == 2" style="color: #67c23a;">完成检验维修</span>
                        <span v-else-if="row.status == 0">-</span>
                    </template>
                </el-table-column>
                <el-table-column label="检验人员" min-width="120" prop="maintainer"></el-table-column>
                <el-table-column label="操作" min-width="120">
                    <template #default="{ row }">
                        <el-button type="primary" link @click="addOrUpdate(row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination style="margin-top: 10px;" background v-model:current-page="state.pagination.page"
                v-model:page-size="state.pagination.rows" layout="->,total, sizes, prev, pager, next, jumper"
                :total="state.total" @current-change="getList" @size-change="getList" />
        </el-card>

        <AddOrUpdate ref="addOrUpdateRef" @refresh="getList(1)"></AddOrUpdate>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, toRaw } from 'vue'
import { weixiujianyan, recordListsExp } from '@/api/miehuoqi'
import { paraphrase } from 'toolkit-x'
import { extinguisherOption, expiredTimeOption } from '@/util/explain'
import AddOrUpdate from './components/AddOrUpdate.vue'
const addOrUpdateRef = ref()
const state = reactive({
    loading: false,
    search: {
        maintain_left: '',
        expire_left: '',
        type: '',
        maintenance_organization: '',
        model: '',
        factory: '',
        maintainer: '',
        status: ''
    },
    pagination: {
        rows: 20,
        page: 1
    },
    total: 0,
    list: []
})
const resetForm = toRaw({ ...state.search })
const getList = async (page = 1) => {
    state.loading = true
    if (page === 1) state.pagination.page = 1
    const { data } = await weixiujianyan({ ...state.pagination, ...state.search }).finally(() => (state.loading = false))
    state.list = data.list
    state.total = data.total
}
getList()

const addOrUpdate = (row?) => {
    addOrUpdateRef.value.open(row)
}
const reset = () => {
    state.search.type = '';
    state.search = resetForm
    getList(1)
}


const hanldeDownExcel = () => {
    recordListsExp({ ...state.pagination, ...state.search }).then(res => {
        const blob = new Blob([res], {
            type: 'application/vnd.ms-excel'
        })

        if (window.navigator.msSaveOrOpenBlob) {
            //兼容IE10
            navigator.msSaveBlob(blob, '导出文件.xlsx')
        } else {
            const href = URL.createObjectURL(blob) //创建新的URL表示指定的blob对象
            const a = document.createElement('a') //创建a标签
            a.style.display = 'none'
            a.href = href // 指定下载链接
            a.download = '导出文件.xlsx' //指定下载文件名
            a.click() //触发下载
            URL.revokeObjectURL(a.href) //释放URL对象
        }
    })

}

</script>

<style lang="scss" scoped>
.red{
    color: red;
    font-size: 14px;
    margin-top: 15px;
}
</style>
